<template>
  <div>
    <categorizeIndex />
    <el-card style="margin: 10px 0">
      <el-button
        type="primary"
        icon="Plus"
        :disabled="useCategorizeStore.infoId3 ? false : true"
        @click="addAtrr"
      >
        添加属性
      </el-button>
      <el-table border style="margin-top: 10px" :data="dataObj">
        <el-table-column
          label="序号"
          width="80px"
          align="center"
          type="index"
        ></el-table-column>
        <el-table-column
          label="属性名称"
          width="180px"
          prop="attrName"
        ></el-table-column>
        <el-table-column label="属性值名称">
          <template #default="{ row }">
            <el-tag
              style="margin: 4px"
              v-for="item in row.attrValueList"
              :key="item.id"
            >
              {{ item.valueName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              icon="Edit"
              color="orange"
              @click="edit(row)"
            ></el-button>
            <el-popconfirm title="确认删除吗?" @confirm="deleteAttr(row)">
              <template #reference>
                <el-button
                  type="primary"
                  size="small"
                  icon="Delete"
                  color="#fc7666"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <Drawer
      v-model="drawer"
      :drawer="drawer"
      :initialRow="currentEditedRow"
      :flag="flag"
    />
  </div>
</template>

<script setup lang="ts">
import categorizeStore from '../../../store/modules/categorize'
import { reqAttr, reqDelete } from '../../../api/product/categorize'
import { watch, ref, onMounted, onBeforeUnmount } from 'vue'
import { dataArray } from '../../../api/product/attr/index'
import Drawer from './component/card.vue'
import { ElMessage } from 'element-plus'

//flag用于点击添加属性，把抽屉的表单清空
let flag = ref<boolean>(false)
let currentEditedRow = ref()
const useCategorizeStore = categorizeStore()
onMounted(() => {
  useCategorizeStore.$reset()
})
//定义存储属性对象
let dataObj = ref<dataArray>([])
let drawer = ref(false)
defineExpose({ drawer, getAttr })
async function getAttr() {
  /*  console.log(123) */

  let result: any = await reqAttr(
    useCategorizeStore.infoId,
    useCategorizeStore.infoId2,
    useCategorizeStore.infoId3,
  )
  console.log(result)

  /* console.log(useCategorizeStore.infoId, useCategorizeStore.infoId2, useCategorizeStore.infoId3); */

  if (result.code == 200) {
    dataObj.value = result.data
    /*  console.log(dataObj.value) */
  }
}
//监听三级id的变化
watch(
  () => useCategorizeStore.infoId3,
  () => {
    dataObj.value = []
    //调用获取接口数据的方法
    if (!useCategorizeStore.infoId3) {
      return
    }
    getAttr()
  },
)
function addAtrr() {
  //点击添加属性，flag为true
  flag.value = true
  drawer.value = true
  setTimeout(() => {
    flag.value = false
  }, 200)
  currentEditedRow.value = {}
}

function edit(row: dataArray) {
  flag.value = false

  currentEditedRow.value = row
  //打开抽屉
  drawer.value = true
}
async function deleteAttr(row: any) {
  let id: number | string = row.id
  let result = await reqDelete(id)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
    getAttr()
  } else {
    ElMessage({
      type: 'error',
      message: '操作失败',
    })
  }
}
//组件在卸载之前清空数据
onBeforeUnmount(() => {
  useCategorizeStore.$reset()
})
</script>

<style scoped lang="scss"></style>
